<template>
  <div class="app-container">
    <el-card class="product-detail" v-loading="loading">
      <div class="product-info" v-if="productInfo.id">
        <!-- 商品图片 -->
        <div class="product-image">
          <el-image
            :src="productInfo.pic || require('@/assets/images/default-book.jpg')"
            fit="cover"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>

        <!-- 商品信息 -->
        <div class="product-content">
          <h1 class="product-name">{{ productInfo.name }}</h1>
          
          <!-- 商品价格 -->
          <div class="product-price">
            <span class="current-price">￥{{ productInfo.price }}</span>
            <span class="original-price">￥{{ (productInfo.price * 1.2).toFixed(2) }}</span>
          </div>

          <!-- 商品属性 -->
          <div class="product-attrs" v-if="productInfo.productAttr">
            <div v-html="productInfo.productAttr"></div>
          </div>

          <!-- 商品规格 -->
          <!-- <div class="product-unit" v-if="productInfo.unit">
            <span class="label">规格：</span>
            <span>{{ productInfo.unit }}</span>
          </div> -->

          <!-- 商品出版日期 -->
          <div class="product-publish-date" v-if="productInfo.publishDate">
            <span class="label">出版日期：</span>
            <span>{{ productInfo.publishDate }}</span>
          </div>

          <!-- 购买数量 -->
          <div class="product-quantity">
            <span class="label">数量：</span>
            <el-input-number
              v-model="quantity"
              :min="1"
              :max="productInfo.stock || 99"
              size="small"
            ></el-input-number>
            <span class="stock-info" v-if="productInfo.stock > 0">库存: {{ productInfo.stock }}</span>
            <span class="stock-info" v-else>暂时无货</span>
          </div>

          <!-- 操作按钮 -->
          <div class="product-actions">
            <el-button 
              type="danger" 
              size="large" 
              @click="handleBuyNow"
              :disabled="!productInfo.stock"
            >
              立即购买
            </el-button>
            <el-button 
              type="primary" 
              size="large" 
              @click="handleAddToCart"
              :disabled="!productInfo.stock"
              :loading="addLoading"
            >
              加入购物车
            </el-button>
          </div>
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="product-detail-content" v-if="productInfo.id">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="商品详情" name="detail">
            <div class="detail-content">
              <div class="detail-item">
                <h3>图书介绍</h3>
                <p>{{ productInfo.description || '暂无介绍' }}</p>
              </div>
              <div class="detail-images" v-if="productInfo.albumPics">
                <el-image
                  v-for="(pic, index) in productInfo.albumPics.split(',')"
                  :key="index"
                  :src="pic"
                  :preview-src-list="productInfo.albumPics.split(',')"
                  fit="contain"
                  class="detail-image"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getProduct } from '@/api/product/product'
import { addToCart } from '@/api/cart/cart'

export default {
  name: 'ProductDetail',
  data() {
    return {
      loading: false,
      addLoading: false,
      productInfo: {
        id: 0,
        name: '',
        price: 0,
        stock: 0,
        pic: '',
        albumPics: '',
        description: '',
        unit: '',
        productAttr: ''
      },
      quantity: 1,
      activeTab: 'detail'
    }
  },
  created() {
    const productId = this.$route.params.id
    if (productId) {
      this.getProductDetail(productId)
    } else {
      this.$message.error('商品ID不能为空')
      this.$router.push('/')
    }
  },
  methods: {
    // 获取商品详情
    async getProductDetail(id) {
      this.loading = true
      try {
        const response = await getProduct(id)
        if (response.code === 200) {
          this.productInfo = response.data
          if (!this.productInfo.stock) {
            this.$message.warning('该商品暂时无货')
          }
        } else {
          this.$message.error(response.msg || '获取商品信息失败')
          this.$router.push('/')
        }
      } catch (error) {
        console.error('获取商品信息失败:', error)
        this.$message.error('获取商品信息失败')
        this.$router.push('/')
      } finally {
        this.loading = false
      }
    },

    // 加入购物车
    async handleAddToCart() {
      if (!this.productInfo.id) {
        this.$message.error('商品ID不能为空')
        return
      }
      
      if (!this.productInfo.stock) {
        this.$message.warning('该商品暂时无货')
        return
      }

      this.addLoading = true
      try {
        const cartItem = {
          productId: this.productInfo.id,
          quantity: this.quantity,
          price: this.productInfo.price,
          productName: this.productInfo.name,
          productPic: this.productInfo.pic,
          productAttr: this.productInfo.productAttr
        }
        
        const response = await addToCart(cartItem)
        if (response.code === 200) {
          this.$message.success('添加成功')
          // 可选：跳转到购物车页面
          // this.$router.push('/cart')
        } else {
          this.$message.error(response.msg || '添加失败')
        }
      } catch (error) {
        console.error('添加购物车失败:', error)
        this.$message.error('添加失败')
      } finally {
        this.addLoading = false
      }
    },

    // 立即购买
    handleBuyNow() {
      if (!this.productInfo.stock) {
        this.$message.warning('该商品暂时无货')
        return
      }

      // 构建订单数据
      const orderData = {
        totalAmount: this.productInfo.price * this.quantity,
        items: [{
          productId: this.productInfo.id,
          productName: this.productInfo.name,
          productPic: this.productInfo.pic,
          productPrice: this.productInfo.price,
          quantity: this.quantity,
          productAttr: this.productInfo.productAttr || ''
        }]
      }

      // 将订单数据存储到sessionStorage
      sessionStorage.setItem('orderData', JSON.stringify(orderData))
      
      // 跳转到订单提交页面
      this.$router.push('/order/submit')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 40px;
  background: linear-gradient(135deg, #f6f8fb 0%, #f1f4f9 100%);
  min-height: 100vh;

  .product-detail {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: none;
    
    .product-info {
      display: flex;
      gap: 48px;
      padding: 40px;

      .product-image {
        width: 500px;
        height: 500px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1));
          pointer-events: none;
        }
        
        .el-image {
          width: 100%;
          height: 100%;
          transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .product-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 24px;

        .product-name {
          font-size: 32px;
          font-weight: 700;
          color: #2c3e50;
          margin: 0;
          line-height: 1.4;
          letter-spacing: -0.5px;
        }

        .product-price {
          padding: 24px;
          background: linear-gradient(145deg, #ffffff, #f8f9fa);
          border-radius: 16px;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
          
          .current-price {
            font-size: 36px;
            font-weight: 700;
            background: linear-gradient(45deg, #8B4513, #D2691E);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-right: 12px;
          }

          .original-price {
            font-size: 20px;
            color: #95a5a6;
            text-decoration: line-through;
          }
        }

        .product-attrs {
          padding: 20px;
          background: linear-gradient(145deg, #ffffff, #f8f9fa);
          border-radius: 16px;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
          color: #34495e;
          font-size: 15px;
          line-height: 1.6;
        }

        .product-publish-date {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #7f8c8d;
          font-size: 15px;
          
          .label {
            font-weight: 500;
          }
        }

        .product-quantity {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 20px;
          background: linear-gradient(145deg, #ffffff, #f8f9fa);
          border-radius: 16px;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
          
          .label {
            color: #7f8c8d;
            font-size: 15px;
            font-weight: 500;
          }
          
          .el-input-number {
            width: 120px;
            
            :deep(.el-input__wrapper) {
              box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
              border-radius: 8px;
              
              &:hover {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
              }
              
              &.is-focus {
                box-shadow: 0 4px 16px rgba(139, 69, 19, 0.15);
              }
            }
          }
          
          .stock-info {
            color: #7f8c8d;
            font-size: 14px;
          }
        }

        .product-actions {
          display: flex;
          gap: 16px;
          margin-top: 12px;

          .el-button {
            flex: 1;
            height: 48px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            
            &:hover {
              transform: translateY(-2px);
            }
            
            &:active {
              transform: translateY(0);
            }
            
            &.el-button--danger {
              background: linear-gradient(45deg, #8B4513, #D2691E);
              
              &:hover {
                box-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
              }
            }
            
            &.el-button--primary {
              background: linear-gradient(45deg, #95a5a6, #7f8c8d);
              
              &:hover {
                box-shadow: 0 8px 24px rgba(127, 140, 141, 0.25);
              }
            }
            
            &.is-disabled {
              background: #e8e8e8;
              color: #999;
              cursor: not-allowed;
              
              &:hover {
                transform: none;
                box-shadow: none;
              }
            }
          }
        }
      }
    }

    .product-detail-content {
      padding: 0 40px 40px;
      
      :deep(.el-tabs__header) {
        margin-bottom: 28px;
      }
      
      :deep(.el-tabs__nav-wrap::after) {
        height: 2px;
        background-color: #ecf0f1;
      }
      
      :deep(.el-tabs__item) {
        font-size: 17px;
        padding: 0 28px;
        height: 52px;
        line-height: 52px;
        transition: all 0.3s ease;
        color: #7f8c8d;
        
        &.is-active {
          font-weight: 600;
          color: #8B4513;
        }
        
        &:hover {
          color: #8B4513;
        }
      }
      
      :deep(.el-tabs__active-bar) {
        background: linear-gradient(45deg, #8B4513, #D2691E);
        height: 3px;
        border-radius: 3px;
      }

      .detail-content {
        padding: 28px;
        background: linear-gradient(145deg, #ffffff, #f8f9fa);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        
        .detail-item {
          margin-bottom: 32px;
          
          h3 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 16px;
            font-weight: 600;
            position: relative;
            padding-left: 16px;
            
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 20px;
              background: linear-gradient(45deg, #8B4513, #D2691E);
              border-radius: 2px;
            }
          }
          
          p {
            color: #34495e;
            font-size: 15px;
            line-height: 1.8;
          }
        }
        
        .detail-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 24px;
          
          .detail-image {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
            
            &:hover {
              transform: translateY(-4px);
              box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            }
          }
        }
      }
    }
  }
}

// 响应式布局优化
@media screen and (max-width: 768px) {
  .app-container {
    padding: 20px;
    
    .product-detail {
      .product-info {
        flex-direction: column;
        gap: 32px;
        padding: 24px;
        
        .product-image {
          width: 100%;
          height: 300px;
        }
        
        .product-content {
          .product-name {
            font-size: 24px;
          }
          
          .product-price {
            .current-price {
              font-size: 28px;
            }
            
            .original-price {
              font-size: 16px;
            }
          }
          
          .product-actions {
            flex-direction: column;
            
            .el-button {
              width: 100%;
            }
          }
        }
      }
      
      .product-detail-content {
        padding: 0 24px 24px;
      }
    }
  }
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}
</style> 